<template name="liveHead">
	<!-- 直播公共头 -->
	<view class="liveHead">
		<view class="content-top flex-bc" :style="{'background':background}">
			<view class="flex-c">
				<view class="arrowleft flex-c" @click="fnGetPreOrNextDate(0)">
					<uni-icons type="arrowleft" size="16" color="#9698A9"></uni-icons>
				</view>
				<view class="flex-ac select" @click="fnChangeDate()">
					<text>日期：{{todayText}}</text>
					<!-- <uni-icons type="arrowdown" size="14" color="#9698A9"></uni-icons> -->
					<view class="arrow">
						
					</view>
				</view>
				<view class="arrowright flex-c" @click="fnGetPreOrNextDate(1)">
					<uni-icons type="arrowright" size="16" color="#9698A9"></uni-icons>
					
				</view>
			</view>
			<view class="typeBox">
				<view class="flex-ac all" @click="fnShowTypeModal()">
					<text>{{typeText}}</text>
					<!-- <uni-icons type="arrowdown" size="14" color="#9698A9"></uni-icons> -->
					<view class="arrow">
						
					</view>
				</view>
				<view class="selectType flex-col-ac" v-if="showType">
					<text class="typeItem" v-for="(item,index) in selectType" :key="index" :class="type == index?'active':''" @click="fnChangeType(index,item)">{{item}}</text>
				</view>
			</view>
			
		</view>
		<uni-popup ref="popupDate" type="bottom">
			<view class="dateBox">
				<view class="title flex-c">
					<text>请选择日期</text>
					<view class="close" @click="close()">
						<uni-icons type="clear" size="26" color="#9698A9"></uni-icons>
					</view>
				</view>
				<view class="timeBox">
					<view class="dateItem flex" v-for="(item,index) in oneWeekDate" :key="index" :class="currentIndex == index? 'active':''" @click="fnSelectDate(index,item)">
						<text>{{item}}</text>
						<view class="today" v-if="today == index">
							今天
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	var util = require('../../common/util.js')
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		name:'liveHead',
		components:{
			uniPopup
		},
		props: {
			background:{
				type:String,
				default: ''
			}
		},
		data() {
			return {
				date: '',
				weekday: '',
				oneWeek:['周一','周二','周三','周四','周五','周六','周日'],
				oneWeekDate:[],
				type: 0,//0代表全部
				selectType:['全部','未开赛','进行中','已结束'],
				typeText:'全部',
				showType:false,
				sendDate:{
					date:'',
					type:''
				},
				today:'',
				todayText:'',
				currentIndex:''
			};
		},
		mounted() {
			var date = new Date();
			var y = date.getFullYear()
			var m = date.getMonth() + 1
			var d = date.getDate()
			var time = y + '-' + util.fnToTwo(m) + '-' + util.fnToTwo(d)
			var weekday = date.getDay()
			console.log(weekday)
			this.date = util.fnToTwo(m) + '-' + util.fnToTwo(d)
			switch (weekday) {
				case 0:
					this.weekday = '周日';
					this.currentIndex = 6
					this.today = 6
					break;
				case 1:
					this.weekday = '周一';
					this.currentIndex = 0
					this.today = 0
					break;
				case 2:
					this.weekday = '周二';
					this.currentIndex = 1
					this.today = 1
					break;
				case 3:
					this.weekday = '周三';
					this.currentIndex = 2
					this.today = 2
					break;
				case 4:
					this.weekday = '周四';
					this.currentIndex = 3
					this.today = 3
					break;
				case 5:
					this.weekday = '周五';
					this.currentIndex = 4
					this.today = 4
					break;
				case 6:
					this.weekday = '周六';
					this.currentIndex = 5
					this.today = 5
					break;
				default:
					break;
			}
			for(var i=0;i<this.getWeekDay(time).length;i++){
				this.oneWeekDate.push(this.getWeekDay(time)[i] + ' ' + this.oneWeek[i])
			}
			this.todayText = this.date+' '+this.weekday
			this.sendDate.date = time
			this.sendDate.type = this.type
			this.$emit("getDate",this.sendDate)
			console.log(this.oneWeekDate)
			
		},
		methods:{
			getWeekDay(dateString) {
				var that = this
			    let dateStringReg = /^\d{4}[/-]\d{1,2}[/-]\d{1,2}$/;
			    if (dateString.match(dateStringReg)) {
			        let presentDate = new Date(dateString),
			            today = presentDate.getDay() !== 0 ? presentDate.getDay() : 7;
			        return Array.from(new Array(7), function(val, index) {
			            return that.formatDate(new Date(presentDate.getTime() - (today - index-1) * 24 * 60 * 60 * 1000));
			        });
			    } else {
			        throw new Error('dateString should be like "yyyy-mm-dd" or "yyyy/mm/dd"');
			    }
			},
			formatDate(date) {
			    return util.fnToTwo(date.getMonth() + 1) + '-' + util.fnToTwo(date.getDate());
			},
			fnShowTypeModal(){
				this.showType = !this.showType
			},
			fnChangeType(index,item){
				if(this.type == index){
					this.showType = !this.showType
					return
				}else{
					this.type = index
					this.showType = !this.showType
				}
				this.typeText = item
				this.sendDate.type = this.type
				this.$emit("getDate",this.sendDate)
			},
			fnChangeDate(){
				this.$refs.popupDate.open()
			},
			fnSelectDate(index,item){
				var date = new Date()
				var y = date.getFullYear()
				console.log(this.currentIndex)
				if(index != this.currentIndex){
					console.log(item)
					this.todayText = item
					this.currentIndex = index
					this.sendDate.date = (y + '-' + item).slice(0,10)
					console.log(this.sendDate.date)
					this.$emit("getDate",this.sendDate)
				}
				this.close()
			},
			close(){
				 this.$refs.popupDate.close()
			},
			fnGetPreOrNextDate(type){
				console.log(this.oneWeekDate)
				if(type){//后一天
					if(this.currentIndex >= 6) return uni.showToast({
						title: '没有更多数据啦！',
						icon: 'none'
					})
					this.currentIndex ++
				}else{//前一天
					if(this.currentIndex <= 0) return uni.showToast({
						title: '没有更多数据啦！',
						icon: 'none'
					})
					this.currentIndex --
				}
				var date = new Date()
				var y = date.getFullYear()
				for(var i=0;i<this.oneWeekDate.length;i++){
					if(this.currentIndex == i){
						console.log(this.oneWeekDate[i])
						this.todayText = this.oneWeekDate[i]
						this.currentIndex = i
						this.sendDate.date = (y + '-' + this.oneWeekDate[i]).slice(0,10)
						this.$emit("getDate",this.sendDate)
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.arrow{
		border-color: #9698A9 #F5F6F8 #F5F6F8 #F5F6F8;
		border-style: solid;
		border-width: 10rpx 10rpx 0 10rpx;
		height: 0;
		width: 0;
	}
	.liveHead{
		height: 100%;
		width: 100%;
	}
	.content-top {
		position: fixed;
		height: 108rpx;
		width: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;
		color: #333;
		font-size: 24rpx;
		z-index: 1;
		border-bottom: 1rpx solid #eee;
		.select {
			width: 260rpx;
			height: 60rpx;
			background: #F5F6F8;
			border-radius: 6rpx;
			margin: 0 10rpx;
		}
	
		.arrowleft,
		.arrowright {
			width: 60rpx;
			height: 60rpx;
			background: #F5F6F8;
			border-radius: 6rpx;
		}
		.typeBox{
			position: relative;
			.all {
				background: #F5F6F8;
				border-radius: 6rpx;
				padding: 0 10rpx;
				height: 60rpx;
				text{
					margin-right: 10rpx;
				}
			}
			.selectType{
				position: absolute;
				top: 84rpx;
				right: 0;
				width: 150%;
				background: rgba(0,0,0,.5);
				border-radius: 10rpx;
				color: #fff;
				.typeItem{
					width: 100%;
					padding: 20rpx 0;
					border-bottom: 1rpx solid #ccc;
					text-align: center;
				}
				.typeItem:nth-last-child(1){
					border: none;
				}
			}
		}
		
	}
	.active{
		color: #EA8681;
	}
	.dateBox{
		border-radius: 20rpx 20rpx 0 0;
		background: #fff;
		.title{
			line-height: 100rpx;
			font-size: 30rpx;
			height: 100%;
			position: relative;
			.close{
				position: absolute;
				top: 0;
				right: 0;
				padding: 0 20rpx;
			}
		}
		.timeBox{
			.dateItem{
				padding: 0 40rpx;
				height: 100rpx;
				align-items: center;
				font-size: 30rpx;
				border-top: 1rpx solid #eee;
				position: relative;
				.today{
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%,-50%);
				}
			}
		}
	}
</style>
